<template>
<!-- <a-spin :spinning="loading"> -->
<a-tabs v-model="selectKey" @change="callback">
    <a-radio-group slot="tabBarExtraContent" buttonStyle="solid" v-model="canvasData.type" @change="getAllAction">
        <a-radio-button value="TODAY">当日</a-radio-button>
        <a-radio-button value="WEEK">一周</a-radio-button>
        <a-radio-button value="MONTH">近一月</a-radio-button>
        <a-radio-button value="YEAR">近一年</a-radio-button>
      </a-radio-group>
    <a-tab-pane tab="商户金额统计" key="MERCHANT">
        <a-select
          placeholder="请选择入驻商户"
          :allowClear="false"
          showSearch
          :filterOption="filterOption"
          class="selectWidth fright"
          :style="{paddingTop: '10px'}"
          v-if="!userInfo.merchantRespParams"
          v-model="merchantNo"
          @change="getMerchAmountList()"
        >
          <a-select-option
            v-for="item of merchPageList"
            :key="item.merchantNo"
            :value="item.merchantNo"
          >{{ item.merchantName }}</a-select-option>
        </a-select>
        <!-- <a-input v-else disabled :style="{width: '150px'}" class="fright" :value="userInfo.merchantRespParams.merchantName"></a-input> -->
        <bar :dataList="merchList" :title="title" :selectKey="selectKey" @barAction="barAction" :style="{marginTop: '50px'}" />
    </a-tab-pane>
      <a-tab-pane tab="通道金额统计" key="CHANNEL">
          <a-select
          placeholder="请选择支付通道"
          :allowClear="false"
          showSearch
          :filterOption="filterOption"
          class="selectWidth fright"
          :style="{paddingTop: '10px'}"
          v-model="channelId"
          @change="getChannelAmountList()"
        >
          <a-select-option
            v-for="item of channelPageList"
            :key="item.channelId"
            :value="item.channelId"
          >{{ item.channelName }}</a-select-option>
        </a-select>
        <chartLine :dataList="channelList" :title="title" :selectKey="selectKey" @lineAction="lineAction" :style="{marginTop: '50px'}" />
    </a-tab-pane>
</a-tabs>
<!-- </a-spin> -->
</template>

<script>
import bar from '../../../commonComponents/chart/bar'
import chartLine from '../../../commonComponents/chart/line'
import { mapState } from "vuex";
import * as API from "../../../api/home";

export default {
  name: "Home",
  data() {
    return {
        pagination: {
            pageNumber: 1,
            pageSize: 300
        },
        loading: false,
        channelPageList: [],
        merchPageList: [
            // {id:1, name: '333'}
        ],
        selectKey: 'MERCHANT',
        merchList: {
          xLine: [],
          yLine: []
        },
        channelList: {
          xLine: [1,2,3,4,5,6],
          yLine: [1,2,3,4,5,6]
        },
        title: '入驻商户',
        mapList: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
        canvasData: {
            type: 'TODAY',
        },
        channelId: null,
        merchantNo: null,
        userInfo:{merchantRespParams:null}
    }
  },
  components: {
    bar,
    chartLine
  },
  // computed: {
  //   ...mapState({
  //     userInfo: state => state.user.userInfo
  //   })
  // },
  mounted() {
    this.getChannelPageList()
    // if (this.userInfo.merchantRespParams) {
    //       this.merchantNo = this.userInfo.merchantRespParams.merchantNo
    //       this.getMerchAmountList()
    //     } else {
    //       this.getMerchPageList()
    //     }
  },
  activated() {
  },
  methods: {
    getMerchPageList() {
      this.loading = true;
      API.getMerchPage().then(res => {
        if (res.code === 200) {
          // this.merchPageList = res.data.map(item => { return {merchantNo:item.merchantNo, name: item.merchantName} })
        this.merchPageList = res.data
        this.merchantNo = res.data ? res.data[0].merchantNo : null
        this.getMerchAmountList()
        }else {
          this.loading = false;
        }
      });
    },
    getChannelPageList() {
      this.loading = true;
      API.getChannelPage().then(res => {
        if (res.code === 200) {
          // this.channelPageList = res.data.map(item => { return {id:item.id, name: item.channelName} })
          this.channelPageList = res.data
          this.channelId = res.data ? res.data[0].channelId : null
          this.getChannelAmountList()
        } else {
          this.loading = false;
        }
      });
    },
    getAllAction(){
      this.getMerchAmountList()
      this.getChannelAmountList()
    },
    getMerchAmountList(day) { // 商户金额统计
      this.loading = true;
      let postBody={
        dateType: this.canvasData.type,
        merchantNo: this.merchantNo
      }
      postBody.day = (typeof day === 'string' && day)? day: null
      this.merchList.xLine = []
      this.merchList.yLine = []
      API.getMerchAmount(postBody).then(res => {
        if (res.code === 200) {
          let data = res.data
          for(let prop in data) {
            this.merchList.xLine.push(prop)
            this.merchList.yLine.push(data[prop])
          }
        }
        // console.log(this.merchList.xLine, 'this.merchList.xLine')
        this.loading = false;
      });
    },
    // getMerchAmountList(){
    //   this.loading = true;
    //   let postBody={
    //     dateIntervalType: this.canvasData.type,
    //     merChaType: this.selectKey
    //   }
    //   postBody.mocFlag = this.selectKey ==='MERCHANT' ? this.merchantNo : this.channelId
    //   API.getTypeAmount(postBody).then(res => {
    //     if (res.code === 200) {
    //       this.selectAction(this.selectKey, res.data)
    //     }
    //     this.loading = false;
    //   });
    // },
    // selectAction (selectKey, data) {
    //   if (selectKey === 'MERCHANT') {
    //     this.merchList.xLine = []
    //       this.merchList.yLine = []
    //       // let data = res.data
    //       for(let prop in data) {
    //         this.merchList.xLine.push(prop)
    //         this.merchList.yLine.push(data[prop])
    //       }
    //   } else {
    //     this.channelList.xLine = []
    //       this.channelList.yLine = []
    //       // let data = res.data
    //       for(let prop in data) {
    //         this.channelList.xLine.push(prop)
    //         this.channelList.yLine.push(data[prop])
    //       }
    //   }
    // },
    barAction(name) {
      if (!this.mapList.includes(name)) {
        this.getMerchAmountList(name)
      }
    },
    getChannelAmountList(day) { // 通道金额统计
      this.loading = true;
      // console.log(this.merchantNo)
      let postBody={
        dateType: this.canvasData.type,
        channelId: this.channelId
      }
      postBody.day = (typeof day === 'string' && day)? day: null
      this.channelList.xLine = []
      this.channelList.yLine = []
      API.getChannelAmount(postBody).then(res => {
        if (res.code === 200) {
          // this.channelList
          var data = res.data
          for(let prop in data) {
            this.channelList.xLine.push(prop)
            this.channelList.yLine.push(data[prop])
          }
        }
        this.loading = false;
      });
    },
    lineAction(name) {
      if (!this.mapList.includes(name)) {
        this.getChannelAmountList(name)
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
      callback(key){
        switch (key) {
        case 'MERCHANT':
            this.title="入驻商户"
            break
        case 'CHANNEL':
            this.title="支付通道"
            break
        default:
            this.title="入驻商户"
            break
        }
    }
  }
};
</script>
